<template>
  <div :class="border ? 'nav_container nav-border' : 'nav_container'">
    <!--左边区域 包含logo和nav-->
    <div class="left">
      <!--logo区域-->
      <div class="logo">
        <img src="@/assets/header-img/logo.png">
      </div>
      <!--navbar区域-->
      <div class="nav-area">
        <div @click="changeNav(item)" v-for="item in navArr" :key="item.id"
             :class="item.id == currentNavId ? 'nav-item nav-item-s':'nav-item'">{{ item.name }}
        </div>
      </div>
    </div>
    <!--右边个人中心区域-->
    <div class="person-area">
      <div @click="toMessage" :class="border ? 'person-item' :'person-item person-item-white'">
        <img src="@/assets/header-img/message.png">
      </div>
      <div @click="handleLanguageChange" :class="border ? 'person-item' :'person-item person-item-white'">
        <img src="@/assets/header-img/english.png">
      </div>
      <div @click="toPersonalCenter" :class="border ? 'person-item' :'person-item person-item-white'">
        <img :src="userStore.getStoreUserInfo().avatar">
      </div>
    </div>
  </div>
</template>

<script setup>
import {watch,ref,reactive,computed,onMounted} from "vue"
import { useRoute, useRouter } from 'vue-router'
import { useAppStore } from "@/store/modules/app";
import { LanguageEnum } from "@/enums/LanguageEnum";
import {useUserStore} from "@/store/index.js";

const userStore = useUserStore()

const appStore = useAppStore();
const { locale, t } = useI18n();

/**
 * 处理语言切换
 *
 * @param lang  语言（zh-cn、en）
 */
function handleLanguageChange() {
  let lang = ""
  if(appStore.language == LanguageEnum.ZH_CN){
    lang = LanguageEnum.EN
  }else{
    lang = LanguageEnum.ZH_CN
  }
  locale.value = lang;
  console.log(lang,"lang",locale.value)
  appStore.changeLanguage(locale.value);

  ElMessage.success(t("langSelect.message.success"));
}

const router = useRouter()
const route = useRoute()

const props = defineProps({
  border: {
    type: Boolean,
    default: true,
  },
});

const navArr = computed(()=>{
  return [
    {
      id: 1,
      name: t("headerComponent.home"),
      routePath: "/home"
    },
    {
      id: 2,
      name: t("headerComponent.searchShip"),
      routePath: "/search-ship"
    },
    {
      id: 3,
      name: t("headerComponent.moreBusiness"),
      routePath: "/more-business",
    }
  ]
})

const currentNavId = ref(null)

// 自动高亮当前路由
watch(() => route.path, (newPath) => {
  const matchedNav = navArr.value.find(item => item.routePath === newPath)
  if (matchedNav) currentNavId.value = matchedNav.id
}, {immediate: true})


function changeNav(item) {
  currentNavId.value = item.id
  router.push({
    path: item.routePath
  })
}

//跳转到个人中心页面
function toPersonalCenter() {
  router.push({
    path: "personal-center"
  })
}

//跳转到个人中心页面
function toMessage() {
  router.push({
    path: "/message"
  })
}


onMounted(()=>{
  console.log(userStore.getStoreUserInfo(),"userStore.getStoreUserInfo()")
  // if(Object.keys(userStore.getStoreUserInfo()).length == 0){
  //   userStore.getUserInfo()
  // }
})


</script>

<style lang="scss">
.nav_container {
  position: relative;
  z-index: 900;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: Helvetica Neue;
  font-size: 16px;
  font-weight: normal;
  line-height: 24px;
  text-align: center;
  letter-spacing: 0em;
  color: #1E1F21;

  .left {
    display: flex;
    align-items: center;
    margin: 14px 0;

    .logo {
      display: flex;
      align-items: center;
      margin-right: 96px;

      img {
        width: 79px;
        height: 32px;
      }
    }

    .nav-area {
      display: flex;
      align-items: center;

      .nav-item {
        margin-right: 48px;
        opacity: 0.6;
      }

      .nav-item-s {
        font-weight: bold;
        color: #1E1F21;
        position: relative;
        opacity: 1;
      }

      .nav-item-s::after {
        content: " ";
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 100%;
        height: 2px;
        background-color: #1E1F21;
      }

      .nav-item:last-child {
        margin-right: 0;
      }
    }
  }


  .person-area {
    margin: 12px 0;
    display: flex;
    align-items: center;

    .person-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #F0F2F7;
      margin-left: 12px;

      img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
      }
    }

    .person-item-white {
      background-color: #fff;
    }
  }
}

.nav-border {
  border-bottom: 1px solid #EAECF2;
}


img {
  object-fit: contain;
}
</style>
